<!-- 描述 -->
<template>
    <view class="nova-column box">
        <text class="title">{{ title }}</text>
        <text v-for="(item, index) in descArr" :key="index" class="line">
            <block v-if="labelKey">{{ item.label }} {{ item.value }}</block>
            <block v-else>{{ item }}</block>
        </text>
    </view>
</template>

<script>
export default {
    name: 'c-desc',
    props: {
        title: {
            type: String,
            default: ''
        },
        labelKey: {
            type: String,
            default: ''
        },
        valueKey: {
            type: String,
            default: ''
        },
        arr: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            descArr: undefined
        };
    },
    watch: {
        arr: function(newVal, oldVal) {
            this._initArr();
        }
    },
    methods: {
        _initArr() {
            this.descArr = [];
            if (this.arr) {
                this.arr.forEach(item => {
                    this.descArr.push(item);
                });
            }
        }
    },
    created() {
        this._initArr();
    }
};
</script>

<style lang="scss">
.box {
    padding: 20rpx 34rpx;
    .title {
        font-size: 30rpx;
        color: #333;
        padding-bottom: 20rpx;
    }
    .line {
        font-size: 26rpx;
        color: #999;
        line-height: 40rpx;
    }
    .tag {
        border-radius: 10rpx;
        font-size: 22rpx;
        color: $uni-color-primary;
        height: 36rpx;
        line-height: 36rpx;
        margin-right: 24rpx;
        padding: 0 10rpx;
        border: 1rpx solid $uni-color-primary;
    }
}
</style>
